<template>
    <div class="create-order">
        <div class="head-line">
            <div class="line-box" v-for="(item,index) in 12" :key="index">
                <div class="line"></div>
                <div class="line"></div>
            </div>
        </div>
        <div class="address">
            <div class="name">
                <p>{{addressInfo.name}}</p>
                <div class="default-address" v-if="addressInfo.status">
                    <span>默认</span>
                </div>
            </div>
            <div class="address-msg">
                <p>{{addressInfo.phone}}</p>
                <p>{{addressInfo.province}}-{{addressInfo.city}}-{{addressInfo.area}} {{addressInfo.address}}</p>
            </div>
            <div class="edit-address" @click="chooseAddress">
                <img src="~assets/icons/edit.png" alt="">
                <span>修改</span>
            </div>
        </div>
        <div class="order-list">
            <div class="order" v-for="(item,index) in orderDetail.goods" :key="index">
                <div class="avatar">
                    <img :src="item['image_url']" alt="">
                </div>
                <div class="product-msg">
                    <p>{{item.name}}</p>
                    <p>{{item.content}}</p>
                    <p>￥{{item.price}} x {{item.number}}</p>
                </div>
            </div>
        </div>
        <div class="price-msg">
            <div class="msg-detail">
                <span>商品积分：</span>
                <span>{{orderDetail['total_integral']}} 积分</span>
            </div>
            <div class="msg-detail">
                <span>优惠券：</span>
                <span>限用</span>
            </div>
            <div class="msg-detail">
                <span>会员折扣：</span>
                <span>无</span>
            </div>
            <div class="msg-detail">
                <span>运费：</span>
                <span>￥{{orderDetail['postage']}}</span>
            </div>
            <div class="msg-detail">
                <span>实付积分：</span>
                <span>￥{{orderDetail['pay_money']}}</span>
            </div>
        </div>
        <div class="leave-message">
            <div class="message-detail">
                <span>留言：</span>
                <input type="text" placeholder="给卖家留言" v-model="message">
            </div>
        </div>
        <div class="total-pay">
            <div class="pay-money">
                <span>实付积分：</span>
                <span>￥{{orderDetail['pay_money']}}</span>
            </div>
            <div class="pay-btn" @click="payment">
                <span>提交订单</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'createOrder',
    data(){
        return {
            choosedCard:false,
            orderDetail:{},
            addressInfo:{},
            message:'',
            ticket:{},
            disMoney:''
        }
    },
    methods:{
        chooseAddress(){
            this.$router.push({name:'addressList', params:{from:'createOrder'}});
        },
        getOrderDetail(){
            let that = this;
            let orderNum = sessionStorage.getItem('order');
            let token = localStorage.getItem('token');
            let loader = that.loading();
            that.$ajax(that, 'post', that.$api.orderPay, {'order_num':orderNum}, token, function(res){
                if(res.data['error_code'] == 0){
                    console.log(res);
                    let ticket = JSON.parse(sessionStorage.getItem('ticket'));
                    that.orderDetail = res.data.msg;
                    that.transferUrl(that.orderDetail.goods);
                    if(ticket){
                        that.disMoney = ticket['coiling_money'];
                        that.orderDetail['pay_money'] = Number(that.orderDetail['pay_money']) - Number(that.disMoney);
                    }
                }
                loader.close();
            })
        },
        getAddressInfo(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.addressList, null, token, function(res){
                if(res.data['error_code'] == 0){
                    let temArr = res.data.msg;
                    that.addressInfo = temArr.find(item => item.status == 1);
                    console.log(that.addressInfo);
                }
            })
        },
        payment(){
            alert('payment start');
            let that = this;
            let token = localStorage.getItem('token');
            let temObj = {};
            let addressInfo = that.addressInfo;
            temObj['order_num'] = sessionStorage.getItem('order');
            temObj.name = addressInfo.name;
            temObj.phone = addressInfo.phone;
            temObj.address = `${addressInfo.province} ${addressInfo.city} ${addressInfo.area} ${addressInfo.address}`;
            temObj['voucher_id'] = '';
            temObj.message = that.message;
            console.log(temObj);
            let loader = that.loading();
            // that.$ajax(that, 'post', that.$api.payment, temObj, token, function(res){
            //     console.log(res);
            //     loader.close();
            // })
            alert(JSON.stringify(temObj));
            that.$ajax(that, 'post', that.$api.payment, temObj, token, function(res){
                alert('payment'+ JSON.stringify(res));
                if(res.data['error_code'] != 0){
                    that.toast('调用微信支付失败！');
                    return;
                }
                let temRes = res.data.msg;
                that.$ajax(that, 'post',that.$api.getWxInfo, null, token, function(res){
                    let wxInfo = res.data.msg;
                    alert('get wx info'+ JSON.stringify(wxInfo));
                    wx.config({
                        debug: true,
                        appId: wxInfo.appId,
                        timestamp: wxInfo.timestamp,
                        nonceStr: wxInfo.nonceStr, 
                        signature: wxInfo.signature,
                        jsApiList: ['chooseWXPay']
                    });
                    wx.ready(function(){
                        wx.chooseWXPay({
                            timestamp: temRes.timestamp,
                            nonceStr: temRes.nonceStr, 
                            package: temRes.package,
                            signType: temRes.signType,
                            paySign: temRes.paySign,
                            success(res){
                                alert('wx pay'+ JSON.stringify(res));
                                that.toast('支付成功！');
                            },
                            fail(res){
                                alert('fail'+ JSON.stringify(res));
                            }
                        })
                    });
                    wx.error(function(res){
                        alert('error'+ JSON.stringify(res));
                    })
                })
                loader.close();
            })
        }
    },
    mounted(){
        this.$store.state.tab = '确认购买';
    },
    activated(){
        this.$store.state.tab = '确认购买';
        this.getOrderDetail();
        let address = JSON.parse(sessionStorage.getItem('address'));
        if(!address){
            this.getAddressInfo();
        }else{
            this.addressInfo = address;
            let temArr = address.address.split('-');
            this.addressInfo.province = temArr[0];
            this.addressInfo.city = temArr[1];
            let temArr2 = temArr[2].split(' ');
            this.addressInfo.area = temArr2[0];
            this.addressInfo.address = temArr2[1];
            this.addressInfo.phone = address.tel;
        }
        this.ticket = JSON.parse(sessionStorage.getItem('ticket'));
    },
    deactivated(){
        sessionStorage.removeItem('ticket');
        this.orderDetail = {};
        this.addressInfo = {};
        this.message = '';
        this.disMoney = '';
    }
}
</script>

<style lang='less'>
@rem:100rem;

.create-order{
    width: 750/@rem;
    margin-top: 88/@rem;
    .head-line{
        width: 100%;
        display: flex;
        background: #ffffff;
        overflow: hidden;
        .line-box{
            height: 6/@rem;
            display: flex;
            margin:0 14/@rem;
            transform: skewX(-40deg);
            .line{
                height: 6/@rem;
                width: 32/@rem;
            }
            .line:nth-of-type(1){
                background: #f59090;
            }
            .line:nth-of-type(2){
                background: #8fc9f6;
            }
        }
    }
    .address{
        width: 100%;
        height: 170/@rem;
        box-sizing: border-box;
        background: #ffffff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 20/@rem;
        position: relative;
        .name{
            .default-address{
                width: 64/@rem;
                height: 34/@rem;
                border: 2/@rem solid #6699ff;
                color: #6699ff;
                text-align: center;
                line-height: 34/@rem;
                margin-top: 30/@rem;
                span{
                    font-size: 20/@rem;
                }
            }
        }
        .address-msg{
            width: 470/@rem;
            text-align: start;
            margin-left: 30/@rem;
            p:nth-of-type(1){
                font-size: 24/@rem;
            }
            p:nth-of-type(2){
                font-size: 24/@rem;
                color: #868686;
                margin-top: 20/@rem;
            }
        }
        .edit-address{
            width: 126/@rem;
            height: 72/@rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top:20/@rem;
            right: 0;
            img{
                height: 26/@rem;
                widows: 26/@rem;
            }
            span{
                font-size: 24/@rem;
                color: #868686;
                margin-left: 6/@rem;
            }
        }
    }
    .order-list{
        width: 100%;
        margin-top: 20/@rem;
        background: #ffffff;
        .order{
            width: 100%;
            height: 206/@rem;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
            .avatar{
                width: 146/@rem;
                overflow: hidden;
                height: 146/@rem;
                margin-left: 20/@rem;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    height: 146/@rem;
                }
            }
            .product-msg{
                margin-left: 24/@rem;
                p{
                    text-align: start;
                }
                p:nth-of-type(2){
                    color: #868686;
                    margin-top: 6/@rem;
                }
                p:nth-of-type(3){
                    font-size: 28/@rem;
                    margin-top: 12/@rem;
                }
            }
        }
    }
    .price-msg{
        width: 100%;
        margin-top: 20/@rem;
        background: #ffffff;
        .msg-detail{
            width: 100%;
            height: 80/@rem;
            box-sizing: border-box;
            padding: 0 20/@rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #f2f2f2;
            span:nth-of-type(2){
                color: #fd4141;
            }
        }
        .msg-detail:nth-of-type(3){
            .choose-card{
                display: flex;
                align-items: center;
                img{
                    width: 30/@rem;
                    height: 30/@rem;
                    vertical-align: bottom;
                }
            }
        }
    }
    .leave-message{
        width: 100%;
        height: 80/@rem;
        margin-top: 20/@rem;
        display: flex;
        align-items: center;
        background: #ffffff;
        box-sizing: border-box;
        padding: 0 20/@rem;
        .message-detail{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            input{
                width: 70%;
                outline: none;
                border: none;
                margin-left: 30/@rem;
            }
        }
        
    }
    .total-pay{
        width: 100%;
        height: 100/@rem;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        .pay-money{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            span{
                font-size: 28/@rem;
            }
            span:nth-of-type(2){
                color: #fd4141;
                font-weight: 600;
            }
        }
        .pay-btn{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fd4141;
            span{
                font-size: 28/@rem;
                color: #ffffff;
            }
        }
        .pay-btn:active{
            background: #fd2929;
        }
    }
}
</style>
